<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import type { Category } from '@/types/userInfo'
import CNav from '@/components/CNav.vue'

import { getUserTagType, postUserTagType } from '@/api/user'

// 标签
const categories = ref<Category[]>([])
// 选中类型
const FollowerCategorys = ref<number[]>([])

const follower = (category: number) => {
  if (FollowerCategorys.value.includes(category)) {
    FollowerCategorys.value = FollowerCategorys.value.filter((item) => item !== category)
    return
  }

  if (FollowerCategorys.value.length === 3) {
    // 如果是微信端，直接submite
    console.log('You have selected 3 followers')
    return
  }
  FollowerCategorys.value.push(category)
  // #ifdef MP-WEIXIN
  if (FollowerCategorys.value.length === 3) {
    submite()
  }
  // #endif
}

async function submite() {
  if (FollowerCategorys.value.length < 3) {
    uni.showToast({
      title: '请选择3个标签',
      icon: 'none',
    })
    return
  }
  console.log(FollowerCategorys.value)
  const ids = FollowerCategorys.value.map((item) => categories.value[item].id)
  const result = await postUserTagType(ids.join(','))
  if (result.code) {
    uni.navigateTo({
      url: '/pages/profile/edit',
    })
  } else {
    uni.showToast({
      title: '更新失败',
      icon: 'none',
    })
  }
}

onLoad(async () => {
  const tags = await getUserTagType()
  categories.value = tags.data
})
</script>
<template>
  <view class="followers-page">
    <CNav title="welcome" />
    <scroll-view class="comments-section" :scroll-y="true">
      <view class="title_box">
        <text class="title"> 选择你3个你喜欢的标签</text>
        <text class="details"
          >这些将是对您的帖子发表评论并出现在您的提要中的人类型。您必须选择至少3种类型</text
        >
      </view>
      <view class="followers-container">
        <view
          v-for="(category, index) in categories"
          :key="index"
          class="follower-category"
          :class="{ active: FollowerCategorys.includes(index) }"
          @click="follower(index)"
        >
          <text>{{ category.name }}</text>
        </view>
      </view>
      <view class="buttom_container">
        <text class="detail">已选择{{ FollowerCategorys.length }}个</text>
        <uv-button @tap="submite()" type="primary" text="确定"></uv-button>
      </view>
    </scroll-view>
  </view>
</template>

<style scoped lang="scss">
.followers-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fff;

  .followers-container {
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;

    .follower-category {
      background-color: #f0f0f0;
      padding: 10px 15px;
      border-radius: 20px;
      font-size: $uni-font-size-base;
      color: #333;
      text-align: center;
      margin: 2.5px;
    }
    .follower-category.active {
      background-color: $uni-color-warning;
      color: #fff;
    }
  }

  .comments-section {
    flex: 1;
    background-color: #f9f9f9;
    overflow-y: scroll;
    .title_box {
      padding: 10px 15px;
      text-align: center;
      align-items: center;
      .title {
        font-size: $uni-font-size-title;
        font-weight: bold;
        color: $uni-text-color;
        margin: auto !important;
        width: 100%;
        text-align: center;
        display: inline-block;
        padding: 10rpx 0px;
      }
      .details {
        font-size: $uni-font-size-base;
        color: $uni-text-color-grey;
      }
    }
  }

  .buttom_container {
    padding: 10px 15px;
    text-align: center;
    .detail {
      color: $uni-text-color-grey;
      display: inline-block;
      padding: 10px;
    }
  }
}
</style>
